<template>
  <div class="border-title">
    <div class="title">
      <div class="title-text">
        <p class="title-box"></p>{{ title }}
      </div>

    </div>
    <div class="content">
      <slot></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  title: string;
}

const props = defineProps<Props>();
</script>

<style scoped>
.border-title {

  width: 100%;
  height: 100%;
  margin: 3px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.title {

  width: 535px;
  height: 40px;
  background-image: url('../../assets/img/img_2.png')  ;
  background-size: cover; /* 或者使用 contain */
}

.title-text {
  display: flex;

  color: white;
  font-weight: bold;
  font-size: 16px;
  margin-left: 9%;
  margin-top: 10px;
  height: 100%; /* 确保占满父容器高度 */
}


.content {
  flex-grow: 1; /* 确保内容区域占据剩余空间 */
}
</style>
